<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div class="customize">Customize your order</div>
		<!-- 输入框 -->
		<div class="inpForm">
			<div class="inpTit">Description</div>
			<div class="problem">
				<div class="problemTit f f-a-c">Targeted problem <span>*</span></div>
				<input type="text" class="inp" v-model="problemVal" placeholder="Example: What rights will you have as a shareholder?" name="" id="" />
			</div>
			<div class="problem">
				<div class="problemTit f f-a-c">Description <span>*</span></div>
				<a-textarea v-model:value="value2" class="textarea" placeholder="I need..." :auto-size="{ minRows: 2, maxRows: 5 }" />
				<div class="tips">As your Gig storefront, your title is the most important place to include keywords that buyers would likely use to search for a service like yours.</div>
			</div>
			<div class="available">Select available time</div>
			<!-- 这个是时间选择 -->
			<div class="time">
				<div class="topTimr f f-a-c f-j-b">
					<div class="lefTime">
						<Time />
					</div>
					<div class="rigTime">
						<!-- 右边选择 -->
						<Hous ref="hous" />
					</div>
				</div>
				<div class="botSetel">
					<div class="problemTit f f-a-c">Targeted problem <span>*</span></div>

					<el-select v-model="values" placeholder="Select" size="large" style="width: 240px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<!-- Select meeting method -->
			<div class="meeting">
				<div class="meetingCount">Select meeting method</div>
				<div class="tuImg f f-a-c f-w-w">
					<img v-for="(item, index) in 15" :key="index" src="/src/assets/user/img1.png" class="img1" alt="" />
				</div>
			</div>
			<div class="btns f f-a-c">
				<div class="btn hand">Send</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import Time from "./Times.vue";
	import Hous from "./hous.vue";
	import { ref, reactive, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let problemVal = ref("");
	let value = ref(new Date());
	const calendar = ref("");
	const statusTab = ref(1);
	const hous = ref("");
	const values = ref("");
	const options = [
		{
			value: "Option1",
			label: "Option1"
		},
		{
			value: "Option2",
			label: "Option2"
		},
		{
			value: "Option3",
			label: "Option3"
		},
		{
			value: "Option4",
			label: "Option4"
		},
		{
			value: "Option5",
			label: "Option5"
		}
	];
	onMounted(() => {
		window.addEventListener("scroll", handleScroll);
	});
	const selectDate = val => {
		if (!calendar.value) return;
		calendar.value.selectDate(val);
	};
	// ------------------------------------------------------------------------------------------------------

	// ------------------------------------------------------------------------------------------------------

	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
	const parentMethod = num => {
		console.log(num, "5656656565565556");
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
